<!DOCTYPE html>
<html lang="zh-CN">

<head>

    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Document</title>
    <link href="../lib/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <script src="../lib/vue_2.5.22.js"></script>
    <script src="../lib/vue-router_3.0.2.js"></script>

</head>

<body>
<div id="app">

    <router-link to='/login'>登录</router-link>
    <router-link to='/register'>注册</router-link>

    <router-view></router-view>
</div>

<script>


    const Login = {
        template: `<div>
            <h1>请选择登录方式</h1>
            <hr>
            <router-link to='/account'>账号密码登录</router-link>&nbsp;&nbsp;
            <router-link to='/iphone'>手机扫码登录</router-link>
            <br><br><br>
            <router-view></router-view>
        </div>`,
        methods: {
            goRegister() {
                this.$router.push("/register");
            }
        }
    }

    const AccountLogin = {
        template: `<div>
        账号: <input type="text" name="username">
        <br>
        密码: <input type="password" name="password">
        <br>
        <button>登录</button>
        <button @click="goRegister">注册新用户</button>
    </div>`,
        methods: {
            goRegister() {
                this.$router.push("/register");
            }
        }
    }

    const Iphone = {
        template: `<div>
            <h3>扫我二维码</h3>
            <img src="../img/erweima.png" alt="">
            <button @click="goRegister">注册新用户</button>
        </div>`,
        methods: {
            goRegister() {
                this.$router.push("/register");
            }
        }
    }

    const Register = {
        template: `<div>
            <!--<p align="center">注册信息</p>-->
            <table border="1" cellspacing="0" cellpadding="5">
              <caption>注册信息</caption>
              <tbody>
               <tr>
                    <td>用户名:</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="password"></td>
                </tr>
                <tr>
                    <td>重复密码:</td>
                    <td><input type="password" name="repeatPassword"></td>
                </tr>
                <tr>
                    <td>验证码:</td>
                    <td><input type="text" name="verifyCode"></td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="button" value="注册新用户"/></td>
                </tr>
            </tbody>
            </table>
</div>`
    }

    let vueRouter = new VueRouter({
        routes: [
            {path: '/', redirect: '/register'},
            {
                path: '/login',
                component: Login, children: [
                    {path: '/account', component: AccountLogin},
                    {path: '/iphone', component: Iphone}
                ]
            },
            {path: '/register', component: Register}
        ]
    });

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: vueRouter
    });
</script>
</body>

</html>